import { SectionDescription } from '@nx/nx-dev-ui-common';
import Link from 'next/link';

export interface CTAProps {
  mainActionLinkText?: string;
  mainActionTitle?: string;
  mainActionLink?: string;
}

export function CallToAction({
  mainActionTitle = 'Get started with Nx',
  mainActionLinkText = 'Get started',
  mainActionLink = '/getting-started/intro',
}: CTAProps): JSX.Element {
  return (
    <section className="relative isolate px-6 py-32 sm:py-40 lg:px-8">
      <svg
        className="absolute inset-0 -z-10 h-full w-full stroke-black/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-white/10"
        aria-hidden="true"
      >
        <defs>
          <pattern
            id="1d4240dd-898f-445f-932d-e2872fd12de3"
            width={200}
            height={200}
            x="50%"
            y={0}
            patternUnits="userSpaceOnUse"
          >
            <path d="M.5 200V.5H200" fill="none" />
          </pattern>
        </defs>
        <svg
          x="50%"
          y={0}
          className="overflow-visible fill-slate-200/20 dark:fill-slate-800/20"
        >
          <path
            d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
            strokeWidth={0}
          />
        </svg>
        <rect
          width="100%"
          height="100%"
          strokeWidth={0}
          fill="url(#1d4240dd-898f-445f-932d-e2872fd12de3)"
        />
      </svg>
      <div
        className="pointer-events-none absolute inset-x-0 top-10 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
        aria-hidden="true"
      >
        <div
          className="aspect-[1108/632] w-[69.25rem] flex-none bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
          style={{
            clipPath:
              'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
          }}
        />
      </div>
      <div className="mx-auto max-w-2xl text-center">
        <h2
          id="cta"
          className="text-3xl font-medium tracking-tight text-slate-950 sm:text-5xl dark:text-white"
        >
          Become a Partner
        </h2>
        <SectionDescription as="p" className="my-6 text-left">
          Are you interested in partnering with Nx? We’re always looking for
          companies and individuals to help our customers adopt and implement
          Nx. Get in touch with us to learn more about becoming a Community
          Partner.
        </SectionDescription>
        <div className="mt-10 flex items-center justify-center gap-x-6">
          <Link
            href={mainActionLink}
            title={mainActionTitle}
            prefetch={false}
            className="rounded-md bg-slate-950 px-3.5 py-2.5 text-sm font-semibold text-slate-100 shadow-sm hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
          >
            {mainActionLinkText}
          </Link>
          <Link
            href="/contact"
            title="Get in touch"
            prefetch={false}
            className="group text-sm font-semibold leading-6 text-slate-950 dark:text-white"
          >
            Contact us{' '}
            <span
              aria-hidden="true"
              className="inline-block transition group-hover:translate-x-1"
            >
              →
            </span>
          </Link>
        </div>
      </div>
    </section>
  );
}
